<template>
  <div class="shopCard">
    <div class="cardList">
      <div
        v-for="(item, index) in shopCart"
        :key="index"
        :class="{ shopCartItemHover: item.checked }"
        class="shopCartItem"
        @click="checkedHandle(index)"
      >
        <div class="cardDetail">
          <div>
            <input type="checkbox" name="shopCart" :value="index" />
          </div>
          <div style="margin: 0px 10px">
            <el-image
              :src="item.shoesImage"
              fit="fill"
              style="width: 100px; height: 100px"
            ></el-image>
          </div>
          <div
            style="width: 200px; font-size: 14px; margin: 0px 20px 0px 200px"
          >
            <span>{{ item.shoesName }}</span>
          </div>
          <div style="font-size: 20px">
            <span>￥{{ item.shoesPrice }}</span>
          </div>
          <div style="margin-right: 50px; margin-left: 10px">
            <el-input-number
              v-model="item.shoesCount"
              size="small"
              :min="1"
            ></el-input-number>
          </div>
          <div style="color: #f56c6c; font-size: 24px">
            <span>￥{{ (item.shoesPrice * item.shoesCount).toFixed(2) }}</span>
          </div>
          <div style="margin-left: 100px">
            <el-button
              type="text"
              style="color: #e6a23c"
              @click="moveToCollect(index)"
              >移入收藏夹</el-button
            >
            <br />
            <el-button type="text" style="color: #f56c6c" @click="remove(index)"
              >删除</el-button
            >
          </div>
        </div>
      </div>
    </div>
    <div class="bottomPay">
      <div style="margin-right: 800px; font-size: 14px">
        <input type="checkbox" name="checkAll" @change="checkAll" /> 全选
      </div>
      <div>
        合计：
        <span style="color: #f40; font-size: 26px">￥{{ totalPrice }}</span>
      </div>
      <div class="payBtn">
        <el-button
          type="text"
          :class="{ activeButton: totalPrice > 0 ? true : false }"
          @click="pay"
        >
          <span style="font-size: 24px">结 算</span>
        </el-button>
      </div>
    </div>
    <el-dialog title="支付" :visible.sync="dialogVisible" width="30%">
      <div>
        <div
          v-for="(item, index) in checkedShopcart"
          :key="index"
          class="payItem"
        >
          <span>商品：{{ item.shoesName }}</span>
          <br />
          <span>数量：{{ item.shoesCount }}</span>
          <br />
          <span>
            价格：
            <span style="color: #f40"
              >￥{{ (item.shoesPrice * item.shoesCount).toFixed(2) }}</span
            >
          </span>
        </div>
        <div style="margin-left: 10px">
          <el-select
            v-model="orderAddress"
            placeholder="请选择收获地址"
            @visible-change="getAddress()"
          >
            <el-option
              v-for="item in userAddressLsit"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <div style="float: right">
          <span style="font-size: 24px">
            合计：
            <span style="color: #f40">￥{{ totalPrice }}</span>
          </span>
        </div>
      </div>
      <div slot="footer">
        <el-button type="primary" @click="payConfirm" size="small"
          >确认支付</el-button
        >
        <el-button @click="dialogVisible = false" size="small">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      orderAddress: "",
      userAddressLsit: [],
      totalPrice: 0,
      shopCart: [],
      checkedShopcart: [],
      checkedAll: false,
      dialogVisible: false,
    };
  },
  methods: {
    //是否选中该商品
    checkedHandle(index) {
      console.log(index);
      let that = this;
      that.shopCart[index].checked = !that.shopCart[index].checked;
      document.getElementsByName("shopCart")[index].checked =
        that.shopCart[index].checked;
      let result = 0;
      for (let i = 0; i < that.shopCart.length; i++) {
        let j = 0;
        if (that.shopCart[i].checked) {
          result += that.shopCart[i].shoesPrice * that.shopCart[i].shoesCount;
        }
      }
      that.totalPrice = result.toFixed(2);
    },
    //移入收藏夹
    moveToCollect(index) {
      let that = this;
      let userId = JSON.parse(localStorage.getItem("user")).userId;
      that.$axios
        .post("/collection/collectionRegist", {
          userId: userId,
          shoesId: that.shopCart[index].shoesId,
        })
        .then(function (response) {
          console.log(response);
          alert("商品已移入收藏夹！");
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    //从购物车中删除该商品
    remove(index) {
      let that = this;
      let shoppingId = that.shopCart[index].shoppingId;
      that.$axios
        .post("/shopping/shoppingDelete?shoppingId=" + shoppingId, {})
        .then(function (response) {
          console.log(response);
          alert("商品已从购物车中删除！");
        })
        .catch(function (error) {
          console.log(error);
        });
      that.shopCart.splice(index, 1);
    },
    //全选
    checkAll() {
      let that = this;
      that.checkedAll = !that.checkedAll;
      var temp = document.getElementsByName("shopCart");
      if (that.checkedAll) {
        // 商品是否选中 激活边框
        for (let i = 0; i < that.shopCart.length; i++) {
          that.shopCart[i].checked = true;
        }
        // checkbox是否选中
        for (let i = 0; i < temp.length; i++) {
          temp[i].checked = true;
        }
      } else {
        for (let i = 0; i < that.shopCart.length; i++) {
          that.shopCart[i].checked = false;
        }
        for (let i = 0; i < temp.length; i++) {
          temp[i].checked = false;
        }
      }
      let result = 0;
      for (let i = 0; i < that.shopCart.length; i++) {
        if (that.shopCart[i].checked) {
          result += that.shopCart[i].shoesPrice * that.shopCart[i].shoesCount;
        }
      }
      that.totalPrice = result.toFixed(2);
    },
    //点击结算按钮，弹出对话框
    pay() {
      let that = this;
      let result = [];
      let j = 0;
      that.dialogVisible = true;
      for (let i = 0; i < that.shopCart.length; i++) {
        if (that.shopCart[i].checked) {
          result.push(that.shopCart[i]);
        }
      }
      that.checkedShopcart = result;
    },
    //确认支付提示框
    payConfirm() {
      let that = this;
      that.dialogVisible = false;
      console.log(that.orderAddress);
      console.log(that.checkedShopcart);
      let shoesData={};
      let userId = JSON.parse(localStorage.getItem("user")).userId;
       console.log(that.checkedShopcart.length);
      for (let i = 0; i < that.checkedShopcart.length; i++) {
        that.$axios
          .post("/order/orderRegist", {
            userId: userId,
            shoesId: that.checkedShopcart[i].shoesId,
            orderName: that.addressForm.addressName,
            orderAddress: that.addressForm.addressContent,
            oederContent:
              that.checkedShopcart[i].shoesName +
              "*" +
              that.checkedShopcart[i].shoesCount,
            orderShoesImage: that.checkedShopcart[i].shoesImage,
            orderPhone: that.addressForm.addressPhone,
            orderPrice:
              that.checkedShopcart[i].shoesPrice *
              that.checkedShopcart[i].shoesCount,
            orderState: "待发货",
          })
          .then(function (response) {
             that.$axios
              .post(
                "/shoes/queryShoesInfoByShoesId?shoesId=" +
                  that.checkedShopcart[i].shoesId,
                {}
              )
              .then(function (response) {
                shoesData = response.data.data;
                shoesData.shoesMonthNumber=shoesData.shoesMonthNumber + that.checkedShopcart[i].shoesCount;
                shoesData.shoesNumber=shoesData.shoesNumber - that.checkedShopcart[i].shoesCount;
            that.$axios.post("/shoes/shoesUpdate", {
                  shoesId: that.checkedShopcart[i].shoesId,
                  shoesMonthNumber: shoesData.shoesMonthNumber,
                  shoesNumber: shoesData.shoesNumber,      
                }).then(function (response) {
                  that.remove(i);
                }).catch(function (error) {
                console.log(error);
              });
              })
              .catch(function (error) {
                console.log(error);
              });
          })
          .catch(function (error) {
            console.log(error);
          });
          
        // that.remove(i);
        
      }
      alert("支付成功！");
      // //刷新页面
      // window.location.reload(true);
    },
  
    shopCartGet() {
      let userId = JSON.parse(localStorage.getItem("user")).userId;
      let that = this;
      that.$axios
        .post("/shopping/queryShoppingInfoByUserId?userId=" + userId, {})
        .then(function (response) {
          that.shopCart = response.data.data.rows;
          for (let i = 0; i < that.shopCart.length; i++) {
            that.shopCart[i].cheacked = false;
            that.shopCart[i].shoesCount = 1;
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    userAddressLsitGet() {
      let userId = JSON.parse(localStorage.getItem("user")).userId;
      let that = this;
      that.$axios
        .post("/address/queryAddressesInfoByUserId?userId=" + userId, {})
        .then(function (response) {
          
          for (let i = 0; i < response.data.data.records; i++) {
            that.userAddressLsit[i] = response.data.data.rows[i];
            that.userAddressLsit[i].value =
              response.data.data.rows[i].addressId;
            that.userAddressLsit[i].label =
              response.data.data.rows[i].addressName +
              "-" +
              response.data.data.rows[i].addressPhone +
              "-" +
              response.data.data.rows[i].addressContent;
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    getAddress() {
      let that = this;
      that.$axios
        .post(
          "/address/queryAddressInfoByAddressId?addressId=" + that.orderAddress,
          {}
        )
        .then(function (response) {
          that.addressForm = response.data.data;
        })
        .catch(function (error) {
          console.log(error);
        });
    },
  },

  created() {
    //获取购物车信息
    this.shopCartGet();
    //获取用户地址
    this.userAddressLsitGet();
  },
};
</script>
<style scoped>
.shopCartItem {
  width: 1140px;
  background-color: white;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  margin: 0 auto;
  margin-bottom: 30px;
}
.shopCartItemHover {
  border: solid 2px #f56c6c;
  border-radius: 4px;
}
.cardDetail {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.bottomPay {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding-left: 20px;
  width: 1160px;
  height: 80px;
  margin: 0 auto;
  background-color: #e5e5e5;
  z-index: 10000;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.payItem {
  width: 360px;
  margin: 0 auto;
  border: 1px solid #909399;
  border-radius: 4px;
  margin-bottom: 10px;
  padding: 20px;
}
.payItem:hover {
  border: solid 2px #f56c6c;
}
.payBtn {
  display: inline-block;
  color: #6c6c6c;
  margin-left: 40px;
}
.payBtn .el-button--text {
  color: #fff;
}
.activeButton {
  color: #f40 !important;
  cursor: pointer !important;
}
</style>